<%--
  Created by IntelliJ IDEA.
  User: My
  Date: 2020/9/29
  Time: 13:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--学生考勤页面（ztt）--%>
<html>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/static/js/jquery-3.1.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<head>
    <title>学生考勤页面</title>
</head>
<body style="background-color: #ccff99;color: #0000FF;">
<center>
<%--    标题--%>
    <h1>学生考勤信息</h1>

<%--    设置查询信息的两个按钮--%>
    <div>
        <button id="selectAllStu" onclick="selectAll()">查询所有学生</button><button id="selectOneStu" onclick="selectOne()">学生个体查询</button>
    </div>
</center>
    <br/>
    <div>
        <button onclick="addEdit()">添加考勤信息</button>
    </div>

<%--    查询结果的展示页面设计--%>
    <div class="margin">
        <table class="table" border="1px">
            <thead>
            <tr>
                <th>编号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
                <th>请假原因</th>
                <th>请假开始时间</th>
                <th>请假结束时间</th>
                <th>批准人</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb">

            </tbody>
        </table>
    </div>
<br/>

<%--设置分页界面--%>
<div class="margin">
            每页显示<span><select id="pageSizeSelect" onchange="onSelectChange()">
            <option></option>
            <option value="2">2</option>
            <option value="5">5</option>
            <option value="10">10</option></select></span>条&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            当前是第<span id="currentPageSpan"></span>页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="button" onclick="firstPage()">首页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="button" onclick="prePage()">上一页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="button" onclick="nextPage()">下一页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="button" onclick="lastPage()">尾页</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            总共<span id="totalPageSpan"></span>页
</div>

<%--   学生考勤模态框的实现--%>
<!-- 这里的div做一个编辑信息的模态框-->
<div class="modal" id="editModal">
    <!-- 对话模态框-->
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>学生考勤信息编辑</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">编号</label>
                <input class="form-control" type="text" id="numInput" placeholder="请输入编号">
                <label class="control-label">学号</label>
                <input class="form-control" type="text" id="snoInput" placeholder="请输入学号">
                <label class="control-label">姓名</label>
                <input class="form-control" type="text" id="nameInput" placeholder="请输入姓名">
                <label class="control-label">班级</label>
                <input class="form-control" type="text" id="classInput" placeholder="请输入班级">
                <label class="control-label">请假原因</label>
                <input class="form-control" type="text" id="reasonInput" placeholder="请输入原因">
                <label class="control-label">请假开始时间</label>
                <input class="form-control" type="text" id="startInput" placeholder="请输入开始时间">
                <label class="control-label">请假结束时间</label>
                <input class="form-control" type="text" id="endInput" placeholder="请输入结束时间">
                <label class="control-label">批准人</label>
                <input class="form-control" type="text" id="approverInput" placeholder="请输入批准人">
            </div>
            <div class="modal-footer">
                <button class="button" data-dismiss="modal">取消</button>
                <button class="button" onclick="saveEdit()">确定</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    // 查询所有学生考勤信息
    function selectAll() {
        $.ajax({
            url:'${pageContext.request.contextPath}/select/all',
            type:'get',
            dataType:'json',
            success:function (info) {
                showAll(info.sa)
            },
            error:function (errorInfo) {
            }
        })

    }

    //查询个体学生考勤信息
    function selectOne() {

    }

//    分页的实现
    //当前页码
    var currentPage = 1;
    //每页要显示的记录个数
    var pageSize = 2;
    //总共有多少页
    var totalPage;

    //用户选择的数据显示个数的实现
    function onSelectChange() {
        pageSize = $("#pageSizeSelect").val();
        updatePage();
    }

    //首页的实现方法
    function firstPage() {
        currentPage = 1;
        updatePage();
    }

    //上一页的实现方法
    function prePage() {
        currentPage--;
        if(currentPage < 1){
            currentPage = 1;
        }
        updatePage();
    }

    //下一页的实现方法
    function nextPage() {
        currentPage++;
        if(currentPage > totalPage){
            currentPage = totalPage;
        }
        updatePage();
    }

    //最后一页的实现方法
    function lastPage() {
        currentPage = totalPage;
        updatePage();
    }

    //展示所有学生考勤信息
    function  showAll(information) {
        var html = '';
        for (var i = 0; i < information.length; i++) {
            //拿到一个用户信息
            var item = information[i];
            html+='<tr>' +
                '<td>'+item.number+'</td>' +
                '<td>'+item.sno+'</td>' +
                '<td>'+item.name+'</td>' +
                '<td>'+item.classroom+'</td>' +
                '<td>'+item.leaveReason+'</td>' +
                '<td>'+item.leaveStart+'</td>' +
                '<td>'+item.leaveEnd+'</td>' +
                '<td>'+item.approver+'</td>' +
                '<td><button type="button" onclick="getEditModal(\''+item.sno+'\')">编辑</button><button type="button" onclick="removeEdit(\''+item.sno+'\')">删除</button></td>' +
                '</tr>'
        }
        $("#tb").html(html);
    }

    //分页显示学生考勤数据的实现
    function updatePage() {
        $.ajax({
            url: "${pageContext.request.contextPath}/select/updatePage",
            type: 'get',
            data: {"currentPage":currentPage,"pageSize":pageSize},
            dataType:'json',
            success:function (result) {
                if(result.code == 0){
                    showAll(result.userList);
                    totalPage = result.totalPage;
                    $("#totalPageSpan").html(totalPage);
                    $("#currentPageSpan").html(currentPage);
                }
                },
            error:function (err) {
        }
    });
    }

    //从数据库得到模态框的默认值
    function getEditModal(sno1) {
        $.ajax({
            url:"${pageContext.request.contextPath}/select/getEdit",
            type:"get",
            dataType:"json",
            data:{
                "sno":sno1
            },
            success:function (result) {
                showEdit(result.list)
            },
            error:function (err) {
            }
        })
        $("#editModal").modal("show");
    }

    //展示模态框的默认值
    function showEdit(list) {
        if(list != null){
            $("#numInput").val(list.number);
            $("#snoInput").val(list.sno);
            $("#nameInput").val(list.name);
            $("#classInput").val(list.classroom);
            $("#reasonInput").val(list.leaveReason);
            $("#startInput").val(list.leaveStart);
            $("#endInput").val(list.leaveEnd);
            $("#approverInput").val(list.approver);
            $("#snoInput").attr("disabled","disabled");
        }else {
            //数据归0
            $("#numInput").val();
            $("#snoInput").val();
            $("#nameInput").val("");
            $("#classInput").val("");
            $("#reasonInput").val("");
            $("#startInput").val("");
            $("#endInput").val("");
            $("#approverInput").val("");
            $("#snoInput").removeAttr("disabled");
        }
        $("#editModal").modal("show");
    }

    //获取模态框的值，并进行存储。
    function saveEdit(){
        var number = $("#numInput").val();
        var sno = $("#snoInput").val();
        var name = $("#nameInput").val();
        var classroom = $("#classInput").val();
        var leaveReason = $("#reasonInput").val();
        var leaveStart = $("#startInput").val();
        var leaveEnd = $("#endInput").val();
        var approver = $("#approverInput").val();
        var dataValue = {"number":number,"sno":sno,"name":name,"classroom":classroom,
        "leaveReason":leaveReason,"leaveStart":leaveStart,"leaveEnd":leaveEnd,"approver":approver};
        $.ajax({
            url: "${pageContext.request.contextPath}/select/saveEdit",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded', //指明是个普通表单提交
            data:dataValue, //传递用户编辑后的信息
            dataType:'json',
            success:function (result) {
                console.log("aaaaaaa"+result);
                    //再次分页加载数据并显示在页面上
                    $("#editModal").modal("hide");//关闭模态编辑框
                    selectAll();
            },
            error:function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    function addEdit() {
        showEdit();
    }

    function removeEdit(sno1) {
        $.ajax({
            url:"${pageContext.request.contextPath}/select/removeEdit",
            contentType: 'application/x-www-form-urlencoded', //指明是个普通表单提交
            type:"post",
            dataType:"json",
            data:{
                "sno":sno1
            },
            success:function (result) {
                selectAll();
            },
            error:function (err) {
            }
        })
    }
</script>

</body>
</html>
